<template>
  <el-card class="box-card" v-loading="loading" shadow="never">
    <el-form>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="合计费用:">
            <span>{{ format_thousand(detailForm.totalMoney) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车船税合计费用:">
            <span>{{ format_thousand(detailForm.carTaxTotalMoney) }}</span>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="交强险合计费用:">
            <span>{{ format_thousand(detailForm.compulsoryTotalMoney) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商业险合计费用:">
            <span>{{ format_thousand(detailForm.commercialTotalMoney) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他保险合计费用:">
            <span>{{ format_thousand(detailForm.otherTotalMoney) }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col>

        <el-table :data="tableData" border>
          <el-table-column label="操作" fixed align="center" width="100">
            <template #default="{row}">
              <el-button type="text" @click="handleRoute(row)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" show-overflow-tooltip min-width="100" fixed align="center"
                           label="记录时间">
            <template #default="{row}">
              {{ row.updateTime ? $dayjs(row.updateTime).format('YYYY-MM-DD') : '' }}
            </template>
          </el-table-column>
          <el-table-column prop="insuranceType" show-overflow-tooltip min-width="100" fixed align="center"
                           label="保险类型">
            <template #default="{row}">
              <span>{{ dictsName(dict.type.insurance_type, row.insuranceType) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="propertyRightName" show-overflow-tooltip min-width="120" fixed align="center"
                           label="车辆产权"/>

          <el-table-column prop="ascription" show-overflow-tooltip min-width="120" fixed align="center"
                           label="租车方名称"/>
          <el-table-column prop="carTax" show-overflow-tooltip min-width="80" fixed label="车船税"/>

          <el-table-column align="center" label="交强险">
            <el-table-column prop="jqxPolicyCode" show-overflow-tooltip min-width="140" align="center" label="保单号"/>
            <el-table-column prop="jqxCompany" show-overflow-tooltip min-width="140" align="center" label="保险公司"/>
            <el-table-column prop="jqxExpectEndTime" show-overflow-tooltip min-width="120" align="center"
                             label="结束时间"/>
            <el-table-column prop="jqxAmount" show-overflow-tooltip min-width="120" align="center" label="费用/元"/>
          </el-table-column>

          <el-table-column label="商业险" align="center">
            <el-table-column prop="syxPolicyCode" align="center" label="保单号" show-overflow-tooltip min-width="140"/>
            <el-table-column prop="syxCompany" align="center" label="保险公司" show-overflow-tooltip min-width="140"/>
            <el-table-column prop="insuranceProName" align="center" label="险种" show-overflow-tooltip min-width="120"/>
            <el-table-column prop="syxActualBeginTime" align="center" label="开始时间" show-overflow-tooltip
                             min-width="120"/>
            <el-table-column prop="syxActualEndTime" align="center" label="结束时间" show-overflow-tooltip
                             min-width="120"/>
            <el-table-column prop="syxAmount" align="center" label="总费用/元" show-overflow-tooltip min-width="100"/>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import {getInsuranceMessage} from "@/api/zcwh/vehicleTabs.js";

export default {
  name: "insuranceMessage", //保险记录
  dicts: ['insurance_type'],
  props: ['carId'],
  computed: {
    dictsName() {
      return (arr, type) => {
        let name = "";
        arr.map((v) => {
          if (type == v.value) {
            name = v.label;
          }
        });
        return name;
      };
    },
  },
  watch: {},
  data() {
    return {
      detailForm: {},
      tableData: [],
      loading: false,
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleRoute(row) {
      this.$emit('handleTab', row)
    },

    async handleList() {
      this.loading = true;
      try {
        const res = await getInsuranceMessage({carId: this.carId});
        if (res.code === 200) {
          const {data} = res;
          this.detailForm = data;
          this.tableData = data.vo;
        }
      } catch (error) {
        console.error("获取保险信息失败", error);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped lang=""></style>


